<template>

    <!-- swiper轮播图 -->
	<div class="swiper-container ">
		<div class="swiper-wrapper">
			<div class="swiper-slide big">
				
				<div v-for='(item,index) in data1' :key="index" class="a1">
					<img :src="url1 + item.image_url" alt="">
					<p>{{item.title}}</p>
				</div>
				
			</div>
			<div class="swiper-slide big">
				
				<div v-for='(item,index) in data2' :key="index + 8" class="a2">
					<img :src="url1 + item.image_url" alt="">
					<p>{{item.title}}</p>
				</div>
				
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		<!-- 如果需要导航按钮 -->
		<!-- <div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div> -->
		<!-- 如果需要滚动条 -->
		<!-- <div class="swiper-scrollbar"></div> -->
	</div>
</template>

<script>
	//swiper轮播图
	import '../../node_modules/swiper/css/swiper.min.css'
	import Swiper from 'swiper'

	export default {
		name: "Slider",
		data: function() {
			return {
				params: {
					url: 'https://elm.cangdu.org/v2/index_entry',
					methods: "GET",
					key: 'homelunbo_a',
				},
				data1: [],
				data2: [],
				url1: 'https://fuss10.elemecdn.com',
			}
		},
		//生命周期,钩子函数
		created: function() {

			//箭头函数里的this是指的所在父级的环境
			this.$store.dispatch('fetch', this.params).then((res) => {
				//网络请求拿到返回的数据,把16条数据分成2部分
				// window.console.log(res.data.lenght);
				for (let i = 0; i < 8; i++) {
					this.data1.push(res.data[i])
				}
				for (let i = 8; i < 16; i++) {
					this.data2.push(res.data[i])
				}
				window.console.log(this.data1)
				window.console.log(this.data2)
			});
		},
		
		//swiper轮播图
		mounted() {
			new Swiper('.swiper-container', {
				//loop: true, 
				// 循环模式选项
				//autoplay: true,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},
			});
		},


	}
</script>


<style scoped>
	.big {
		width: 100%;
		/* 弹性盒布局 */
		display: flex;
		/* 让八个小块,分成2行排列 */
		flex-wrap: wrap;
	}

	.a1,
	.a2 {
		width: 15%;
		margin: 35px;
	}

	.a1 img,
	.a2 img {
		width: 100%;
	}

	.a1 p,
	.a2 p {
		font-size: 20px;
	}
</style>
